import {Input, Button, DateRangePicker, Table, Pagination, Form} from 'element-react';
import withRouter from '../../router/withRouter';
import React from 'react';
import './index.css';

class Other extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          label: "日期",
          prop: "date",
          width: 180
        },
        {
          label: "姓名",
          prop: "name",
          width: 180
        },
        {
          label: "地址",
          prop: "address"
        }
      ],
      data: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      page: 1,
      pageSize: 10,
      total: 40,
      searchForm: {
        name: '',
        address: '',
        date: ''
      }
    }
    
  }

  onSubmit() {

  }

  onChange(key, value) {

  }

  render() {
    return (
      <div>
        <div className='search'>
          <Form model={this.state.searchForm} labelWidth="60" onSubmit={this.onSubmit.bind(this)}>
            <Form.Item label="姓名" prop='name'>
              <Input value={this.state.searchForm.name} onChange={this.onChange.bind(this, 'name')}></Input>
            </Form.Item>
            <Form.Item label="地址" prop='address'>
              <Input value={this.state.searchForm.address} onChange={this.onChange.bind(this, 'address')}></Input>
            </Form.Item>
            <Form.Item label="时间" prop='date'>
            <DateRangePicker
              value={this.state.searchForm.date}
              placeholder="选择日期范围"
              onChange={this.onChange.bind(this, 'address')}
              />
            </Form.Item>
            <Form.Item labelWidth="0" className='searchBtn'>
              <Button type='primary'>搜索</Button>
              <Button>重置</Button>
            </Form.Item>
          </Form>
        </div>
        <Table
          style={{width: '100%'}}
          columns={this.state.columns}
          data={this.state.data}
        />
        <div className='footer'>
          <Pagination layout="total, sizes, prev, pager, next, jumper" total={this.state.total} pageSizes={[10, 20, 50, 100]} pageSize={this.state.pageSize} currentPage={this.state.page}/>
        </div>
      </div>
    )
  }
}

export default withRouter(Other)